<script setup lang="ts">
import { sys_common_status, sys_device_type } from '/@/const/Options.ts'
import { usePagination } from '/@lib/hooks/usePagination.ts'
import { useLoading } from '/@lib/hooks/useLoading'
import { useForm } from '/@lib/hooks/useForm.ts'
import { LoginLogQuery, LoginLogVO } from '/@/api/monitor/sysLoginLog/types.ts'
import { ApiSysLoginLog } from '/@/api/monitor/sysLoginLog'
import { formatDateTimeForHMS } from '/@lib/utils/tool.ts'
import { addDateRange } from '/@lib/utils/vipUtil.ts'

defineOptions({ name: 'sysLoginLog' })

const { loading, showLoading, hideLoading } = useLoading()
const { pageNum, pageSize, total, setTotal, onChangeCurrent, onChangePageSize } = usePagination(() => getTableList())
const queryFormRef = ref()
const defaultSort = ref<any>({ prop: 'loginTime', order: 'descending' })
const dateRange = ref<[DateModelType, DateModelType]>(['', ''])
const { form: queryParams } = useForm<LoginLogQuery>({
  pageNum: computed(() => pageNum.value),
  pageSize: computed(() => pageSize.value),
  ip: '',
  userName: '',
  status: '',
  orderByColumn: defaultSort.value.prop,
  isAsc: defaultSort.value.order
})
const tableRef = ref()
const tableData = ref<LoginLogVO[]>([])
// const AddOrUpdateRef = ref()

/** 搜索按钮操作 */
const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  dateRange.value = ['', '']
  tableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order)
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 新增按钮操作 */
// const handleAdd = () => {
//   AddOrUpdateRef.value?.openAdd()
// }
// /** 修改按钮操作 */
// const handleUpdate = async (row: LoginLogVO) => {
//   AddOrUpdateRef.value?.openEdit(row)
// }
// /** 删除按钮操作 */
// const handleDelete = async (row: LoginLogVO) => {
//   const _id = row.id
//   const _idLabel = row.clientKey
//   try {
//     await ModalUtil.confirm('是否确认删除名称为【 ' + _idLabel + ' 】的数据项？')
//     showLoading()
//     await ApiClient.remove(_id)
//     ModalUtil.msgSuccess('删除成功')
//     await getTableList()
//   } finally {
//     hideLoading()
//   }
// }
/** 排序触发事件 */
const handleSortChange = (column: any) => {
  queryParams.orderByColumn = column.prop
  queryParams.isAsc = column.order
  getTableList()
}

const getTableList = async () => {
  showLoading()
  try {
    const res = await ApiSysLoginLog.page(addDateRange(queryParams, dateRange.value))
    tableData.value = res.rows
    setTotal(res.total)
  } finally {
    hideLoading()
  }
}
getTableList()
// const successCallback = () => {
//   getTableList()
// }
</script>

<template>
  <div class="page-container">

    <el-card shadow="never" class="card-body-no-padding-bottom">
      <VipQueryForm>
        <VipQueryFormTopPanel>
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="登录IP" prop="ip">
              <el-input v-model="queryParams.ip" placeholder="请输入登录IP" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="用户账号" prop="userName">
              <el-input v-model="queryParams.userName" placeholder="请输入用户账号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" placeholder="登录状态" clearable>
                <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="登录时间" style="width: 308px">
              <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button plain type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </VipQueryFormTopPanel>
      </VipQueryForm>
    </el-card>

    <el-card shadow="never" class="flex-column flex-auto no-margin-bottom">
      <!--      <VipTableTool>-->
      <!--        <VipTableToolLeftPanel>-->
      <!--          <el-button icon="Plus" type="primary" @click="handleAdd">添加</el-button>-->
      <!--        </VipTableToolLeftPanel>-->
      <!--      </VipTableTool>-->

      <div class="flex-auto">
        <el-table
          ref="tableRef"
          v-loading="loading"
          :data="tableData"
          border
          style="height: 100%"
          :default-sort="defaultSort"
          @sort-change="handleSortChange">
          <el-table-column type="selection" align="center" width="50" />
          <el-table-column type="index" align="center" label="序号" width="55" />

          <!--  主内容   -->
          <el-table-column label="用户名称" align="center" prop="userName" show-overflow-tooltip
                           sortable="custom"
                           :sort-orders="['descending', 'ascending']" />
          <el-table-column label="客户端" align="center" prop="clientKey" show-overflow-tooltip />
          <el-table-column label="设备类型" align="center">
            <template #default="scope">
              <VipDictTag :options="sys_device_type" :value="scope.row.deviceType" />
            </template>
          </el-table-column>
          <el-table-column label="IP" align="center" prop="ip" show-overflow-tooltip />
          <el-table-column label="登录地点" align="center" prop="ipLocation" show-overflow-tooltip />
          <el-table-column label="操作系统" align="center" prop="os" show-overflow-tooltip />
          <el-table-column label="浏览器" align="center" prop="browser" show-overflow-tooltip />
          <el-table-column label="登录状态" align="center" prop="status">
            <template #default="scope">
              <VipDictTag :options="sys_common_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="描述" align="center" prop="msg" show-overflow-tooltip />
          <el-table-column label="访问时间" align="center" prop="loginTime" sortable="custom"
                           :sort-orders="['descending', 'ascending']" width="180">
            <template #default="scope">
              <span>{{ formatDateTimeForHMS(scope.row.loginTime) }}</span>
            </template>
          </el-table-column>

          <!--  操作栏   -->

          <template #empty>
            <el-empty class="vip-data-empty" description="暂无数据" />
          </template>
        </el-table>
      </div>

      <VipPagination
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="onChangeCurrent"
        @size-change="onChangePageSize"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
</style>
